
const chartDom3 = document.getElementById('main-chart-3');
const myChart3 = echarts.init(chartDom3);
var categories = ['“三有”企业', '民营企业500强', '互联网企业100强', '专精特新小巨人企业', '上市企业', '独角兽企', '高新技术企业', '科技型中小企业'];
var singleData = [50, 60, 50, 40, 55, 25, 65, 33];
var unitedData = [12, 18, 28, 55, 15, 14, 14, 52];
var fontSize10 = 10
var fontSize12 = 12
var fontSize24 = 24
option = {
    title: {
        show: false
    },

    legend: {
        right: '8%',
        textStyle: {
            color: '#fff',
            fontSize: fontSize10
        },
        itemWidth: 20,
        itemHeight: 10,
    },
    tooltip: { trigger: 'axis', axisPointer: { type: 'cross', crossStyle: { color: '#999' } } },
    grid: {
        width: '90%',
        left: '5%',
        height: '80%',
        top: '20%',
        containLabel: true
    },
    xAxis: {
        type: 'category',
        data: categories,
        axisTick: { show: false },
        axisLine: { show: false },
        axisLabel: {
            interval: 0, // 强制全部显示
            textStyle: {
                color: '#fff',
                fontSize: fontSize12
            },
            formatter: function (value) {
                return value.length > 4 ? value.slice(0, 4) + '\n' + value.slice(4) : value;
            },
        },
    },
    yAxis: {
        type: 'value',
        name: '覆盖率(%)',
        nameTextStyle: {
            color: '#fff',
            fontSize: fontSize12,
        },
        splitLine: { show: false },
        axisTick: { show: false },
        axisLine: { show: false },
        axisLabel: {
            textStyle: {
                color: '#fff',
                fontSize: fontSize12
            }
        }
    },
    series: [
        {
            name: '联建覆盖的企业数',
            data: unitedData,
            type: 'bar',
            barWidth: 15,
            itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                    { offset: 0, color: '#1DF7FB' },
                    { offset: 1, color: '#665BF2' }
                ]),
            },
            label: {
                show: true,
                position: 'top',
                color: '#fff',
                fontWeight: 'bold',
                formatter: (params) => {
                    console.log(params.data)
                    return `{a|${params.data}%}`;
                },
                rich: {
                    a: {
                        color: '#fff',
                        fontFamily: 'DIGI',
                        fontSize: fontSize24
                    }
                }
            }
        }
    ],
    dataZoom: [{ type: 'inside', xAxisIndex: 0, zoomOnMouseWheel: true, moveOnMouseMove: true, start: 0, end: 80 }]

};

function myChartPieResize () {
    myChart3.resize();
}

myChart3.setOption(option);
